<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="./favicon.ico" />
    <title>loading...</title>
    <link rel="stylesheet" href="dist/styles/iview.css">
    <link rel="stylesheet" href="maptalks/maptalks.css">
    <style>
        html,
        body,
        #container,
        #bmap {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        
        #bmap .maptalks-zoom-zoomin,
        #bmap .maptalks-zoom-zoomout {
            width: 35px;
            height: 35px;
            color: #000000;
            font-size: 20px;
            font-weight: 500;
        }
        
        #bmap .maptalks-zoom-zoomin {
            border-bottom: 0px;
            background: #ffffff url('./images/trail_icon_largr@2x.png') center center no-repeat;
            background-size: 18px 18px;
            line-height: 35px;
        }
        
        #bmap .maptalks-zoom-zoomout {
            background: #ffffff url('./images/trail_icon_narrow@2x.png') center center no-repeat;
            background-size: 18px 3px;
            line-height: 30px;
        }
        
        div.controller {
            position: absolute;
            right: 10px;
            bottom: 10px;
            width: 500px;
            height: 240px;
            line-height: 60px;
            background: #E8F0F7;
            border: 1px solid #C3CEDE;
        }
        
        label.BMapLabel::after {
            font-size: 0px;
            line-height: 0px;
            width: 0px;
            height: 0px;
            border-width: 10px;
            border-style: dashed solid dashed dashed;
            border-color: transparent red transparent transparent;
            position: absolute;
            margin-left: -19px;
            margin-top: -42px;
        }
        
        .guiji_sanjiao {
            font-size: 0px;
            line-height: 0px;
            width: 0px;
            height: 0px;
            border-width: 10px;
            border-style: dashed solid dashed dashed;
            border-color: transparent #666 transparent transparent;
            position: absolute;
            margin-left: -30px;
            margin-top: -76px;
        }
        
        .guiji_sanjiao_2 {
            font-size: 0px;
            line-height: 0px;
            width: 0px;
            height: 0px;
            border-width: 10px;
            border-style: dashed solid dashed dashed;
            border-color: transparent #F7F8F9 transparent transparent;
            position: absolute;
            margin-left: -30px;
            margin-top: -76px;
        }
        
        .interval {
            position: absolute;
            top: 11px;
            left: 60px;
            width: 30px;
            height: 20px;
            background: rgba(255, 255, 255, 0.8);
            color: #000;
            line-height: 20px;
            text-align: center;
            font-size: 15px;
        }
        
        p>span.window_title {
            color: #1678FF;
        }
        
        .last-address {
            white-space: normal;
        }
        
        .down-wrapper {
            position: absolute;
            bottom: 10px;
            width: 300px;
            right: 10px;
            background: red;
            border: 1px solid #e6e6e6;
        }
        
        .track-info {
            padding: 10px;
            background-color: #fff;
            border: 1px solid #dbd5d5
        }
        
        [v-cloak] {
            display: none;
        }
        
        .el-zoom-in-bottom-enter-active,
        .el-zoom-in-bottom-leave-active {
            opacity: 1;
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
            -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
            transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
            transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
            transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
        }
        
        .el-zoom-in-bottom-enter,
        .el-zoom-in-bottom-leave-active {
            opacity: 0;
            -webkit-transform: scaleY(0);
            transform: scaleY(0)
        }
        
        .pull-up {
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        
        .right-10 {
            right: 10px;
        }
        
        .right-60 {
            right: 60px;
        }
        
        .down-button {
            position: absolute;
            top: -35px;
            right: 0px;
        }
        
        .exact-btn {
            width: 100%;
            height: 30px;
            cursor: pointer;
            background-position: center center;
            background-size: 72px 35px;
            background-repeat: no-repeat;
        }
        
        .right-100 {
            top: 50px;
        }
        
        .left-65 {
            left: 65px;
        }
        
        div.map-type {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 11;
        }
        
        .right-65 {
            top: 65px;
        }
        
        .left-205 {
            left: 205px;
        }
        
        div.selected-map-wrap {
            cursor: pointer;
        }
        
        div.selected-map-wrap div.map-icon {
            width: 26px;
            height: 26px;
            margin: 5px;
        }
        
        div.selected-map-wrap div.map-icon>img {
            width: 100%;
            height: 100%;
            border: 0;
        }
        
        div.selected-map-inner {
            width: 110px;
            height: 40px;
            box-sizing: border-box;
            background-color: #ffffff;
            border: 1px solid #c8d2db;
            cursor: pointer;
        }
        
        div.selected-map-inner>div {
            float: left;
        }
        
        div.switch-map-label {
            margin-top: 5px;
            width: 52px;
            line-height: 26px;
            font-size: 12px;
        }
        
        div.selected-map-list {
            position: absolute;
            top: 39px;
            left: 0px;
            right: 0px;
            z-index: 99;
            overflow: hidden;
            background: #ffffff;
            border: 1px solid #C8D2DB;
        }
        
        div.selected-map-list>div {
            width: 100%;
            height: 40px;
        }
        
        div.selected-map-list>div>div {
            float: left;
        }
        
        div.selected-map-list>div:hover {
            background-color: #FCF0C0;
        }
        
        div.selected-map-list>div.actived {
            background-color: #FCF0C0;
        }
        
        ul.map-selector-popup {
            position: absolute;
            right: 115px;
            width: 193px;
            height: 60px;
            box-sizing: border-box;
            padding: 0px;
            margin: 0px;
            list-style: none;
        }
        
        ul.map-selector-popup>li {
            float: left;
            border-radius: 4px;
        }
        
        ul.map-selector-popup .traffic {
            width: 40px;
            height: 60px;
            margin-right: 5px;
            background-color: white;
        }
        
        ul.map-selector-popup .traffic-img {
            width: 100%;
            height: 40px;
            text-align: center;
            padding-top: 10px;
        }
        
        ul.map-selector-popup .traffic-img img {
            width: 18px;
            height: 22px;
            border: 0;
        }
        
        ul.map-selector-popup .traffic-label {
            height: 20px;
            font-size: 12px;
            text-align: center;
        }
        
        .switch-map-style {
            width: 70px;
            height: 60px;
            background-color: white;
        }
        
        .switch-map-style-icon {
            width: 65px;
            height: 35px;
            margin: 2.5px auto;
        }
        
        .switch-map-style-label {
            height: 20px;
            line-height: 18px;
            text-align: center;
        }
        
        .switch-map-style-label>i {
            display: inline-block;
            width: 11px;
            height: 8px;
            background-image: url("./images/position_icon_map——sel.png");
            margin-right: 6px;
        }
        
        .switch-map-style-label>span {
            font-size: 12px;
        }
        
        ul.map-selector-popup .normal_map {
            margin-right: 5px;
        }
        
        ul.map-selector-popup .normal_map .switch-map-style-icon {
            background-image: url("./images/position_icon_route.png");
        }
        
        ul.map-selector-popup .satellite_map .switch-map-style-icon {
            background-image: url("./images/position_icon_satellite.png");
        }
        
        .MapSelector_item_193IR {
            height: 50px;
            width: 50px;
            float: left;
            border: 1px solid;
            cursor: pointer;
            position: relative;
            margin-right: 5px;
        }
        
        .satellite-map {
            background: url(./images/model-satel.png) no-repeat;
            background-position: 50%;
        }
        
        .normal-map {
            background: url(./images/model-map.png) no-repeat;
            background-position: 50%;
        }
        
        .map_icon_traffic_off {
            background: url() no-repeat;
            background-position: center 3px;
        }
        
        .map_icon_traffic_on {
            background: url() no-repeat;
            background-position: center 3px;
        }
        
        .map_icon_xiansu_off {
            background: url() no-repeat;
            background-position: center 4px;
        }
        
        .map_icon_xiansu_on {
            background: url() no-repeat;
            background-position: center 4px;
        }
        
        .map_selector_icon_text {
            position: absolute;
            bottom: 1px;
            left: 1px;
            right: 1px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            font-size: 12px;
        }
        
        .no_selected_icon {
            background-color: rgba(255, 255, 255, 0.7);
        }
        
        .selected_icon {
            background-color: rgba(64, 150, 209, 0.9);
            color: rgb(255, 255, 255);
        }
    </style>
    <script src="js/js.cookie.min.js"></script>
</head>

<body>
    <div id="container" v-cloak>
        <div id="bmap"></div>
        <div class="interval">{{interval}}</div>

        <transition name="el-zoom-in-bottom">
            <div class="down-wrapper" v-show="isDown">
                <div class="down-button">
                    <i-button shape="circle" icon="ios-arrow-down" @click="isDown=false"></i-button>
                </div>
                <div class="track-info" v-html="trackHtml"></div>
            </div>
        </transition>

        <div class="pull-up" v-show="!isDown">
            <i-button shape="circle" icon="ios-arrow-up" @click="isDown=true"></i-button>
        </div>

        <div style="position: absolute; right: 55px; top: 10px;z-index: 999;">
            <selected-map @select-map="onSelectMap" @switch-traffic="onSwitchTraffic"></selected-map>
        </div>

        <div class="map-type">
            <div class="selected-map-wrap">
                <div class="map-icon" @click="isExact = !isExact" :title="$t(isExact?'monitor.exactTrack':'monitor.crudeTrack')">
                    <img :src="imgSrcBg">
                </div>
            </div>
        </div>
    </div>

    <script type="text/x-template" id="selected-map-template">
        <div class="selected-map-wrap" v-click-outside.capture="onClickOutside">
            <div class="selected-map-inner" @click="isShowMapList=true">
                <div class="map-icon"><img :src="mapIcon"></div>
                <div class="switch-map-label">
                    {{mapSelectorList[currentMapIndex].label}}
                </div>
                <div style="padding-top:6px;">
                    <i v-if="isShowMapList" class="ivu-icon ivu-icon-ios-arrow-up" style="font-size: 18px;"></i>
                    <i v-else class="ivu-icon ivu-icon-ios-arrow-down" style="font-size: 18px;"></i>
                </div>
            </div>
            <div class="selected-map-list" v-show="isShowMapList">
                <div v-for="(item,index) in mapSelectorList" :data-index="index" :class="{actived:mapType==item.value}" :key="index" @click="selectedMap(index)">
                    <div class="map-icon">
                        <img :src="item.src">
                    </div>
                    <div class="switch-map-label">
                        {{item.label}}
                    </div>
                </div>
            </div>
            <!-- <div class="map-selector-popup" v-show="isShowMapList" :style="mapSelectorPopupSty">
                <div v-if="false" class="MapSelector_item_193IR" :class="{'map_icon_xiansu_off':!isShowXianSu,'map_icon_xiansu_on':isShowXianSu}" style="width:35px" @click="isShowXianSu=!isShowXianSu">
                    <div class="map_selector_icon_text no_selected_icon">{{speed}}</div>
                </div>
                <div class="MapSelector_item_193IR" :class="{'map_icon_traffic_off':!isShowTraffic,'map_icon_traffic_on':isShowTraffic}" style="width:35px" @click="isShowTraffic=!isShowTraffic">
                    <div class="map_selector_icon_text no_selected_icon">{{traffic}}</div>
                </div>
                <div class="MapSelector_item_193IR normal-map" @click="isSatelliteMap=false">
                    <div class="map_selector_icon_text" :class="{'selected_icon':!isSatelliteMap,'no_selected_icon':isSatelliteMap}">{{map}}</div>
                </div>
                <div class="MapSelector_item_193IR satellite-map" @click="isSatelliteMap=true">
                    <div class="map_selector_icon_text" :class="{'selected_icon':isSatelliteMap,'no_selected_icon':!isSatelliteMap}">{{satellite}}</div>
                </div>
            </div> -->
            <ul class="map-selector-popup" v-show="isShowMapList" :style="mapSelectorPopupSty">
                <li class="traffic" @click="isShowTraffic=!isShowTraffic">
                    <div class="traffic-img">
                        <img src="./images/position_icon_map_way.png">
                    </div>
                    <div class="traffic-label">路况</div>
                </li>
                <li class="normal_map switch-map-style" :style="{backgroundColor:!isSatelliteMap?'#1678FF':'#ffffff'}" @click="isSatelliteMap=false">
                    <div class="switch-map-style-icon"></div>
                    <div class="switch-map-style-label">
                        <i v-if="!isSatelliteMap"></i>
                        <span :style="{color:!isSatelliteMap?'#ffffff':'#000000'}">地图</span>
                    </div>
                </li>
                <li class="satellite_map switch-map-style" :style="{backgroundColor:isSatelliteMap?'#1678FF':'#ffffff'}" @click="isSatelliteMap=true">
                    <div class="switch-map-style-icon"></div>
                    <div class="switch-map-style-label">
                        <i v-if="isSatelliteMap"></i>
                        <span :style="{color:isSatelliteMap?'#ffffff':'#000000'}">卫星</span>
                    </div>
                </li>
            </ul>
        </div>
    </script>



    <script src="dist/vue.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="js/gps51-jquery.js"></script>
    <script src="js/js.cookie.min.js"></script>
    <script src="js/config.js"></script>
    <script src="js/hashmap.js"></script>
    <script src="js/localcachemgr.js"></script>
    <script src="js/transformlatlon.js"></script>
    <script src="js/dateformat.js"></script>
    <script src="./js/v-click-outside-x.js"></script>
    <script src="js/util.js"></script>
    <script src="js/websocketmgr.js"></script>
    <script src="js/vue-i18n.min.js"></script>
    <script src="js/language.js"></script>
    <script src="custom/languageex.js"></script>
    <script src="maptalks/maptalks.min.js"></script>
    <script>
        var isShare = utils.getParameterByName("isshare") == 1 ? true : false;
        var authcode = utils.getParameterByName("authcode");
        var isValid = utils.getParameterByName("isvalid");
        var expire = utils.getParameterByName("expire");
        var timeDifference = DateFormat.getOffset();
        var isOverdue = false;
        var token = utils.getParameterByName("token");
        var icon = utils.getParameterByName("icon");

        var flightPathArrList = [];
        var isZh = utils.locale === 'zh';
        var mapType = utils.getMapType();
        var vRoot = null;
        var isMobile = null;
        var layerVector = null;
        var browser = {
            versions: function() {
                var u = navigator.userAgent,
                    app = navigator.appVersion;
                return { //移动终端浏览器版本信息 
                    trident: u.indexOf('Trident') > -1, //IE内核 
                    presto: u.indexOf('Presto') > -1, //opera内核 
                    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核 
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端 
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器 
                    iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQ HD浏览器 
                    iPad: u.indexOf('iPad') > -1, //是否iPad 
                    webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部 
                };
            }(),
            language: (navigator.browserLanguage || navigator.language).toLowerCase()
        }
        if (browser.versions.ios == false && browser.versions.android == false) {
            isMobile = false;
        } else {
            isMobile = true;
        }
        (function() {

            Vue.component('selected-map', {
                data: function() {
                    return {
                        isShowMapList: false, //是否显示选择框
                        isSatelliteMap: false, //是否卫星地图
                        isShowXianSu: false,
                        isShowTraffic: false,
                        mapSelectorList: [{
                            label: isZh ? "百度地图" : "BaiduMap",
                            value: "bMap",
                            src: './images/map/bMap.png',
                        }, {
                            label: isZh ? "高德地图" : "AMap",
                            value: "aMap",
                            src: './images/map/aMap.png',
                        }, {
                            label: isZh ? "国内谷歌" : "gChinaMap",
                            value: "gChinaMap",
                            src: './images/map/gChinaMap.png',
                        }, {
                            label: isZh ? "谷歌地图" : "GoogleMap",
                            value: "gMap",
                            src: './images/map/gMap.png',
                        }, ],
                        speed: isZh ? "限速" : "Speed",
                        traffic: isZh ? "路况" : "Traffic",
                        map: isZh ? "地图" : "Map",
                        satellite: isZh ? "卫星" : "Satellite",
                        currentMapIndex: 0,
                        mapType: mapType
                    }
                },
                methods: {
                    onClickOutside: function() {
                        this.isShowMapList = false;
                    },
                    selectedMap: function(index) {

                        var item = this.mapSelectorList[index];
                        this.mapType = item.value;
                        this.$emit('select-map', {
                            mapType: item.value,
                            xiansu: this.isShowXianSu,
                            traffic: this.isShowTraffic,
                            satelliteMap: this.isSatelliteMap
                        });
                        this.currentMapIndex = index;
                    },
                    getCurrentMapIndex: function() {
                        var index = 0;
                        for (var i = 0; i < this.mapSelectorList.length; i++) {
                            var item = this.mapSelectorList[i];
                            if (item.value == this.mapType) {
                                index = i;
                                break;
                            }
                        }
                        return index;
                    }
                },
                computed: {
                    mapIcon: function() {
                        return './images/map/' + this.mapType + '.png';
                    },
                    mapTypeStr: function() {
                        var mapTypeStr = '';
                        for (var i = 0; i < this.mapSelectorList.length; i++) {
                            var item = this.mapSelectorList[i];
                            if (item.value == this.mapType) {
                                mapTypeStr = item.label;
                                break;
                            }
                        }
                        return mapTypeStr;
                    },
                    mapSelectorPopupSty: function() {
                        var top = 40;
                        var currentMapIndex = this.currentMapIndex;
                        var maxCurrentIndex = this.mapSelectorList.length - 1;

                        top = top * (currentMapIndex + 1);

                        if (currentMapIndex == maxCurrentIndex) {
                            top -= 24;
                        }


                        return {
                            top: top + 'px'
                        }
                    }
                },
                watch: {
                    isSatelliteMap: function() {
                        this.$emit('select-map', {
                            mapType: this.mapType,
                            xiansu: this.isShowXianSu,
                            traffic: this.isShowTraffic,
                            satelliteMap: this.isSatelliteMap
                        });
                    },
                    isShowXianSu: function(newVal) {
                        this.$emit('switch-xiansu', newVal);
                    },
                    isShowTraffic: function(newVal) {
                        this.$emit('switch-traffic', newVal);
                    },
                },
                mounted: function() {
                    this.currentMapIndex = this.getCurrentMapIndex();
                },
                template: document.getElementById('selected-map-template').innerHTML
            })


            var deviceName = utils.getParameterByName("devicename");

            document.title = isZh ? deviceName + " | 跟踪" : deviceName + " | Track";
            var userName = localStorage.getItem('name');
            var startIcon = null;
            var vm = vRoot = new Vue({
                el: "#container",
                i18n: utils.getI18n(),
                data: {
                    isExact: true, //是否精确
                    map: null,
                    deviceid: "",
                    deviceName: deviceName,
                    tracks: [],
                    exactTracks: [],
                    interval: 10,
                    carMarker: null,
                    address: "",
                    isDown: true,
                    trackHtml: "",
                    mapType: 'bMap',
                },
                methods: {
                    onSelectMap: function(item) {
                        this.mapType = item.mapType;
                        this.setMapType(item);
                    },
                    onSwitchTraffic: function(traffic) {
                        var isBMap = this.mapType == 'bMap';
                        if (traffic) {
                            if (isBMap) {
                                this.baiduTrafficLayer.show();
                            } else {
                                this.googleTrafficLayer.show();
                            }
                        } else {
                            if (isBMap) {
                                this.baiduTrafficLayer.hide();
                            } else {
                                this.googleTrafficLayer.hide();
                            }
                        }
                    },
                    initMap: function() {

                        this.mapType = mapType;
                        this.lastMapType = mapType;

                        this.googleTrafficLayer = null;
                        this.baiduTrafficLayer = null;

                        this.map = new maptalks.Map('bmap', {
                            centerCross: true,
                            center: [106, 36.11],
                            zoom: 5,
                            minZoom: 4,
                            maxZoom: 20,
                            scaleControl: true,
                            dragRotate: false,
                            dragPitch: false,
                        });

                        this.setMapType({
                            mapType: this.mapType,
                            traffic: false,
                            xiansu: false,
                            satelliteMap: false
                        });

                        var customPosition = new maptalks.control.Zoom({
                            'position': {
                                'top': '5',
                                'left': '15'
                            },
                            'slider': false,
                            'zoomLevel': false
                        });
                        this.map.addControl(customPosition);

                        this.lineLayer = new maptalks.VectorLayer('line').addTo(this.map);
                        this.lineLayer.setZIndex(998);
                        this.lineString = new maptalks.LineString(
                            [], {
                                symbol: {
                                    'lineColor': {
                                        'type': 'linear',
                                        'colorStops': [
                                            [0.00, 'red'],
                                            [1.00, 'red']
                                        ]
                                    },
                                    'lineWidth': 4
                                }
                            }).addTo(this.lineLayer);
                    },
                    setMapType: function(mapInfo) {
                        this.map.removeLayer('baiduText');
                        this.map.removeLayer('aliText');
                        var me = this;
                        var newMapType = mapInfo.mapType;
                        var satelliteMap = mapInfo.satelliteMap;
                        var traffic = mapInfo.traffic;
                        if (newMapType == 'bMap') {
                            me.map.setSpatialReference({
                                projection: 'baidu'
                            });
                            var layer = new maptalks.TileLayer('base', satelliteMap ? baiduSatelliteBaseOption : baiduNormaBaseOption)
                            me.map.setBaseLayer(layer);
                            if (satelliteMap) {
                                var textlayer = new maptalks.TileLayer('baiduText', baiduTextBaseOption)
                                me.map.addLayer(textlayer);
                            }

                        } else if (newMapType == 'gMap') {
                            var layer = new maptalks.TileLayer('base', satelliteMap ? googleSatelliteBaseOption : googleNormaBaseOption)
                            me.map.setSpatialReference({})
                            me.map.setBaseLayer(layer);

                        } else if (newMapType == 'aMap') {
                            var layer = new maptalks.TileLayer('base', satelliteMap ? aliSatelliteBaseOption : aliNormaBaseOption)
                            me.map.setSpatialReference({})
                            me.map.setBaseLayer(layer);
                            if (satelliteMap) {
                                var textlayer = new maptalks.TileLayer('aliText', aliTextBaseOption)
                                me.map.addLayer(textlayer);
                            }


                        } else if (newMapType == 'gChinaMap') {
                            var baseOption = satelliteMap ? googleChinaSatelliteBaseOption : googleChinaNormaBaseOption;
                            var layer = new maptalks.TileLayer('base', baseOption)
                            me.map.setSpatialReference({})
                            me.map.setBaseLayer(layer);
                        }

                        me.addTrafficLayer(traffic);

                        me.lastMapType = newMapType;

                    },
                    addTrafficLayer: function(traffic) {

                        if (this.baiduTrafficLayer == null) {
                            this.baiduTrafficLayer = new maptalks.TileLayer("baidutraffic", {

                                urlTemplate: function(x, y, z) {
                                    var domain = '';

                                    if (this.options && this.options['subdomains']) {
                                        var subdomains = this.options['subdomains'];
                                        if (isArrayHasData(subdomains)) {
                                            var length = subdomains.length;
                                            var s = (x + y) % length;
                                            if (s < 0) {
                                                s = 0;
                                            }
                                            domain = subdomains[s];
                                        }
                                    }
                                    var data = {
                                        'x': x,
                                        'y': y,
                                        'z': z,
                                        'domain': domain,
                                        'time': Date.now()
                                    };
                                    var URL_PATTERN = /\{ *([\w_]+) *\}/g;
                                    return baiduTrafficUrlTemplate.replace(URL_PATTERN, function(str, key) {
                                        var value = data[key];

                                        if (value === undefined) {
                                            throw new Error('No value provided for variable ' + str);

                                        } else if (typeof value === 'function') {
                                            value = value(data);
                                        }
                                        return value;
                                    });
                                }
                            });
                            this.map.addLayer(this.baiduTrafficLayer);
                            this.baiduTrafficLayer.hide();
                        }

                        if (this.googleTrafficLayer == null) {
                            this.googleTrafficLayer = new maptalks.TileLayer("googletraffic", {
                                urlTemplate: function(x, y, z) {

                                    y = Math.pow(2, z) - 1 - y;
                                    var domain = '';

                                    if (this.options && this.options['subdomains']) {
                                        var subdomains = this.options['subdomains'];
                                        if (isArrayHasData(subdomains)) {
                                            var length = subdomains.length;
                                            var s = (x + y) % length;
                                            if (s < 0) {
                                                s = 0;
                                            }
                                            domain = subdomains[s];
                                        }
                                    }
                                    var data = {
                                        'x': x,
                                        'y': y,
                                        'z': z,
                                        'domain': domain,
                                        'time': Date.now()
                                    };
                                    var URL_PATTERN = /\{ *([\w_]+) *\}/g;
                                    return googleTrafficUrlTemplate.replace(URL_PATTERN, function(str, key) {
                                        var value = data[key];

                                        if (value === undefined) {
                                            throw new Error('No value provided for variable ' + str);

                                        } else if (typeof value === 'function') {
                                            value = value(data);
                                        }
                                        return value;
                                    });
                                }
                            });
                            this.map.addLayer(this.googleTrafficLayer);
                            this.googleTrafficLayer.hide();
                        }

                        this.onSwitchTraffic(traffic);

                    },
                    getPointList: function(tracks) {
                        var pointList = [];
                        if (this.mapType == 'bMap') {
                            for (var i = 0; i < tracks.length; i++) {
                                var track = tracks[i];
                                pointList.push(track.bpoint);

                            }
                        } else {
                            for (var i = 0; i < tracks.length; i++) {
                                var track = tracks[i];
                                pointList.push(track.gpoint);
                            }
                        }
                        return pointList;
                    },
                    getWindowContent: function(track, b_address) {
                        var strstatus = '';
                        var posiType = utils.getPosiType(track);
                        if (isZh) {
                            strstatus = track.strstatus ? track.strstatus : '';
                        } else {
                            strstatus = track.strstatusen ? track.strstatusen : '';
                        }
                        if (track.radius > 0) {
                            var radiuDesc = null;
                            if (isZh) {
                                radiuDesc = ' (误差范围:' + track.radius + '米)';
                            } else {
                                radiuDesc = ' (Around:' + track.radius + 'm)';
                            }
                            posiType += radiuDesc;
                        };
                        if (track.gotsrc === 'gps' && track.gpsvalidnum) {
                            posiType += "(" + track.gpsvalidnum + ")";
                        };
                        if (isZh) {
                            var isOnineStr = utils.getIsOnline(track) ? "在线" : "离线";
                        } else {
                            var isOnineStr = utils.getIsOnline(track) ? "online" : "offline";
                        };

                        var speed = track.speed == 0 ? "0km/h" : (track.speed / 1000).toFixed(2) + "km/h";
                        var rxlevel = track.rxlevel === 0 ? '' : ('(' + (isZh ? '信号' : 'Signal') + ':' + track.rxlevel + '%)');
                        var content =
                            '<p><span class="window_title">' + (isZh ? '设备序号' : 'Device ID') + '</span>: ' + track.deviceid + "  " + (isZh ? '设备名称' : 'Device Name') + ': ' + this.deviceName + '</p>' +
                            '<p><span class="window_title">' + (isZh ? '定位类型' : 'Position Type') + '</span>: ' + posiType + '</p>' +
                            '<p><span class="window_title">' + (isZh ? '经纬纬度' : 'Longitude and latitude') + '</span>: ' + track.callon.toFixed(6) + ',' + track.callat.toFixed(6) + '</p>' +
                            '<p><span class="window_title">' + (isZh ? '更新时间' : 'Update time') + '</span>: ' + DateFormat.longToLocalDateTimeStr(track.updatetime) + '(' + isOnineStr + ')</p>' +
                            '<p><span class="window_title">' + (isZh ? '定位时间' : 'Locate Time') + '</span>: ' + DateFormat.longToLocalDateTimeStr(track.validpoistiontime) + '</p>' +
                            '<p><span class="window_title">' + (isZh ? '实时速度' : 'Speed') + '</span>: ' + speed + rxlevel + '</p>' +
                            '<p><span class="window_title">' + (isZh ? '停留时长' : 'Parking Period') + '</span>: ' + utils.timeStamp(track.parkduration, isZh) + '</p>' +
                            '<p><span class="window_title">' + (isZh ? '总里程数' : 'Total Mileage') + '</span>: ' + utils.getMileage(track.totaldistance) + '</p>' +
                            '<p><span class="window_title">' + (isZh ? '行驶里程' : 'Travel Mileage') + '</span>: ' + utils.getMileage(this.getTravelMileage()) + '</p>' +
                            '<p><span class="window_title">' + (isZh ? '设备状态' : 'Status') + '</span>: ' + strstatus + '</p>' +
                            '<p class="last-address"> ' + b_address + '</p>';
                        return content;
                    },
                    getAddress: function(info, callback) {
                        var me = this;
                        var callon = info.callon;
                        var callat = info.callat;
                        var bd09 = wgs84tobd09(callon, callat)
                        var lng = bd09[0].toFixed(5);
                        var lat = bd09[1].toFixed(5);

                        var address = LocalCacheMgr.getAddress(lng, lat);
                        if (address != null) {
                            callback(address);
                            return;
                        }

                        utils.getJiuHuAddressSyn(callon, callat, function(resp) {
                            if (resp.status > 9900) {
                                console.log('getJiuHuAddressSyn token失效,请重新登录')
                            } else if (resp.status == 0) {
                                address = resp.address
                                LocalCacheMgr.setAddress(lng, lat, address);
                                callback(address);
                            } else {
                                console.log('getJiuHuAddressSyn 查询地址失败')
                            }
                        });


                        return isZh ? "地址正在解析..." : "The address is being resolved...";
                    },
                    getLastPosition: function(callback) {
                        var me = this;
                        var url = myUrls.lastPosition();
                        var data = {
                            username: this.username,
                            deviceids: [this.deviceid],
                            lastquerypositiontime: me.lastquerypositiontime
                        };
                        utils.sendAjax(url, data, function(resp) {
                            if (resp.status == 0) {
                                me.lastquerypositiontime = resp.lastquerypositiontime;
                                callback(resp.records[0]);
                            } else {
                                me.$Message.error("轨迹查询失败!");
                            };
                        });
                    },
                    doLastPosition: function(record) {
                        if (record) {
                            var me = this;
                            var isBMap = this.mapType == 'bMap';
                            var g_lon_lat = wgs84togcj02(record.callon, record.callat);
                            record.gpoint = {
                                y: g_lon_lat[1],
                                x: g_lon_lat[0]
                            };

                            var lng_lat = wgs84tobd09(record.callon, record.callat);
                            record.bpoint = {
                                y: lng_lat[1],
                                x: lng_lat[0]
                            };

                            var prveTrack = this.tracks[this.tracks.length - 1];
                            if (prveTrack) {
                                if (prveTrack.updatetime >= record.updatetime) {
                                    return;
                                }
                            }

                            var isExact = record.gotsrc == "gps";

                            if (this.tracks.length > 0) {

                                this.tracks.push(record);

                                if (isExact) {
                                    this.exactTracks.push(record);
                                }



                                var pointList = null;
                                if (this.isExact) {
                                    pointList = this.getPointList(this.exactTracks);
                                } else {
                                    pointList = this.getPointList(this.tracks);
                                }

                                this.lineString.setCoordinates(pointList);

                                if (this.isExact) {
                                    if (isExact) {
                                        this.map.setCenter(isBMap ? record.bpoint : record.gpoint);
                                        this.carMarker.setCoordinates(isBMap ? record.bpoint : record.gpoint);
                                        this.carMarker.setSymbol(this.getMarkerSymbol('./images/carstate/0_green_0.png', record.course, 15));
                                        me.trackHtml = me.getWindowContent(record, isZh ? '正在解析地址...' : 'Resolving address...');
                                        this.getAddress(record, function(address) {
                                            me.trackHtml = me.getWindowContent(record, address);
                                        })
                                    }
                                } else {
                                    this.map.setCenter(isBMap ? record.bpoint : record.gpoint);
                                    this.carMarker.setCoordinates(isBMap ? record.bpoint : record.gpoint);
                                    this.carMarker.setSymbol(this.getMarkerSymbol('./images/carstate/0_green_0.png', record.course, 15));
                                    me.trackHtml = me.getWindowContent(record, isZh ? '正在解析地址...' : 'Resolving address...');
                                    this.getAddress(record, function(address) {
                                        me.trackHtml = me.getWindowContent(record, address);
                                    })
                                }


                            } else if (this.tracks.length === 0) {

                                this.tracks.push(record);
                                this.exactTracks.push(record);

                                this.carMarker = this.createMarker(record, true, './images/carstate/0_green_0.png', 15);
                                this.startMarker = this.createMarker(record, false, './images/icon_st.png', 0);
                                this.markerLayer = new maptalks.VectorLayer('marker', [this.startMarker, this.carMarker]).addTo(this.map);
                                this.markerLayer.setZIndex(999);
                                this.map.setCenter(isBMap ? record.bpoint : record.gpoint);
                                this.map.setZoom(16);
                                me.trackHtml = me.getWindowContent(record, isZh ? '正在解析地址...' : 'Resolving address...');
                                this.getAddress(record, function(address) {
                                    me.trackHtml = me.getWindowContent(record, address);
                                })

                            };


                        }
                    },
                    createMarker(track, isRotate, markerFile, markerRotation) {

                        var isBMap = this.mapType == 'bMap';
                        var gpoint = track.gpoint;
                        var bpoint = track.bpoint;

                        var pointArr = isBMap ? [bpoint.x, bpoint.y] : [gpoint.x, gpoint.y];

                        return new maptalks.Marker(
                            pointArr, {
                                symbol: this.getMarkerSymbol(markerFile, isRotate ? track.course : 0, markerRotation),
                            }
                        );
                    },
                    getMarkerSymbol: function(markerFile, markerRotation, markerDy) {
                        return {
                            'markerFile': markerFile,
                            'markerWidth': 30,
                            'markerHeight': 30,
                            'markerRotation': -markerRotation,
                            'markerDy': markerDy,
                            'markerDx': 0,
                        };
                    },
                    handleDown: function() {
                        this.isDown = !this.isDown;
                    },
                    getShareLastPosition: function(callback) {
                        var me = this;
                        var url = myUrls.shareTrackLastPosition();
                        var data = {
                            authcode: authcode,
                            deviceid: this.deviceid
                        };
                        utils.sendAjax(url, data, function(resp) {
                            if (resp.status == 0) {
                                isOverdue = resp.isvalid == 1 ? false : true;
                                if (isOverdue) {
                                    me.$Message.error("账号已过期");
                                    return;
                                }
                                callback(resp.records[0]);
                            } else {
                                me.$Message.error("轨迹查询失败!")
                            };
                        });
                    },
                    initApp: function(deviceid) {
                        var me = this;
                        if (isShare) {
                            this.getShareLastPosition(this.doLastPosition);
                            setInterval(function() {
                                me.interval--;
                                if (me.interval == 0 || me.interval < 0) {
                                    if (isOverdue) {
                                        me.$Message.error("账号已过期");
                                        return;
                                    }
                                    me.getShareLastPosition(me.doLastPosition);
                                    me.interval = 10;
                                };
                            }, 1000);
                        } else {
                            this.getLastPosition(this.doLastPosition);
                            setInterval(function() {
                                me.interval--;
                                if (me.interval == 0 || me.interval < 0) {
                                    me.getLastPosition(me.doLastPosition);
                                    me.interval = 10;
                                };
                            }, 1000);

                            initWebSocket(wsHost, userName + "-trackmap", function(data) {
                                var action = data.action;
                                if (action === "positionlast" && data.positionLast && data.positionLast.deviceid == deviceid) {
                                    data.positionLast && me.doLastPosition(data.positionLast);
                                };
                            })
                        }
                    },
                    getTravelMileage: function() {
                        var tracks = this.isExact ? this.exactTracks : this.tracks;
                        if (tracks.length <= 1) {
                            return 0;
                        } else {
                            var firstMileage = tracks[0];
                            var lastMileage = tracks[tracks.length - 1];
                            return lastMileage.totaldistance - firstMileage.totaldistance;
                        }
                    },
                    reDrawMap: function(newVal) {
                        var tracks = this.isExact ? this.exactTracks : this.tracks;
                        var isBMap = newVal == 'bMap';
                        if (tracks[0]) {
                            var pointList = this.getPointList(tracks);
                            this.lineString.setCoordinates(pointList);

                            var sTrack = this.tracks[0];
                            var eTrack = tracks[tracks.length - 1];
                            this.carMarker.setCoordinates(isBMap ? eTrack.bpoint : eTrack.gpoint);
                            this.startMarker.setCoordinates(isBMap ? sTrack.bpoint : sTrack.gpoint);
                            this.map.setCenter(isBMap ? eTrack.bpoint : eTrack.gpoint);
                        } else {
                            this.trackHtml = '';
                            this.isDown = false;
                        }
                    },

                },
                computed: {
                    token: function() {
                        return localStorage.getItem("token");
                    },

                    username: function() {
                        return localStorage.getItem("name");
                    },
                    imgSrcBg: function() {
                        return this.isExact ? './images/map/gps_fine.png' : './images/map/gps_coarse.png';
                    },
                },
                watch: {
                    isExact: function() {
                        this.reDrawMap(this.mapType);
                    },
                    mapType: function(newMapType) {
                        this.reDrawMap(newMapType);
                    }
                },
                mounted: function() {
                    var me = this;
                    me.lastquerypositiontime = 0;
                    me.initMap();
                    var deviceid = utils.getParameterByName("deviceid");
                    if (deviceid) {
                        this.deviceid = deviceid;
                        me.initApp(deviceid);
                    } else {
                        this.$Message.error("设备序号不能为空!");
                    };
                }
            });
        })();
    </script>
</body>

</html>